PopupBottom

<template>
    <div class="item-container mt-15" @click="itemClick">
        <van-image class="img-icon" fit="cover" position="left" :src="props.itemData.icon">
            <!-- <template v-slot:error>加载失败</template> -->
        </van-image>
        <div class="item-content">
            <div>
                <div class="title">{{ props.itemData.name }}</div>
                <div class="work">{{ props.itemData.exam_type }}</div>
            </div>
            <div class="item-content-bottom">
                <!-- <div class="btn-click btn-arrow">{{ btnTextData.text1 }}>></div> -->
                <div
                    :class="['btn-click', 'btn-big', props.itemData.btnType === 3 ? 'gradient-blue' : 'gradient-pink', 'btn-six-edge']">
                    {{ btnTextData.text2 }}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup name="TestItem">
import { computed } from 'vue';
import { TestItemProps } from '../../type';
interface BtnDataProps {
    text1: string;
    text2: string;
    emitName: string;
}
const emits = defineEmits(['couponClick', 'reportClick', 'answerClick', 'itemClick'])
const props = defineProps<{
    itemData: TestItemProps
}>()
const btnDataArr: BtnDataProps[] = [
    {
        text1: '点击兑换',
        text2: '福利赏兑换',
        emitName: 'couponClick'
    },
    {
        text1: '点击查看',
        text2: '查看报告',
        emitName: 'reportClick'
    },
    {
        text1: '点击答题',
        text2: '继续答题',
        emitName: 'answerClick'
    }
]
// btnType 1 赏金对话 2 查看报告 3 继续答题
const btnTextData = computed<BtnDataProps>(() => {
    return btnDataArr[props.itemData.btnType ? Number(props.itemData.btnType) - 1 : 0]
})
const btnClick = () => {
    emits((btnTextData as any).value?.emitName, props.itemData)
}
const itemClick = (event: any) => {
    const target = event.target;
    if (target.classList.contains('btn-big') || target.classList.contains('btn-arrow')) {
        btnClick()
    } else {
        emits('itemClick', props.itemData)
    }
}
</script>

<style lang="scss" scoped>
.item-container {
    color: $color_white;
    width: 100%;
    background-color: $color_bg_dark;
    border: 1px solid;
    border-image: conic-gradient(from 180deg at 50% 50%, #590446 -36deg, #12286F 59deg, #3F1E81 244deg, #590446 324deg, #12286F 419deg) 1;
    padding: 13px;
    display: flex;

    .img-icon {
        width: 146px;
        height: 74px;
        border-radius: 5px;
        overflow: hidden;
    }

    .item-content {
        flex: 1;
        display: flex;
        padding-left: 15px;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;

        .title {
            font-size: 16px;
            line-height: 20px;
            color: $color_white;
        }

        .work {
            font-size: 12px;
            line-height: 20px;
            color: $color_sub_title;
            text-align: right;
        }

        .item-content-bottom {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .btn-arrow {
                font-size: 14px;
                color: $color_pink;
            }

            .btn-big {
                width: 111px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                font-size: 14px;
            }
        }
    }
}
</style>